<template>
    <div>
        <p class="grey--text text--darken-4" style="font-size: 16px;" v-text="label"></p>
        <vue-file-agent
            theme="default"
            multiple
            deletable
            meta
            :linkable="true"
            :accept="'image/*,.zip,.pdf,.doc,.docx,.ods'"
            :maxSize="'10MB'"
            :maxFiles="maxFiles"
            :helpText="'Choose images or documents files'"
            :errorText="{
                type: 'Invalid file type. Only images or documents Allowed',
                size: 'Files should not exceed 10MB in size',
            }"
            @beforedelete="onDeleteClicked"
            @input="onUpload"
            :value="fileRecords"
        ></vue-file-agent>
        <button :disabled="!fileRecords.length">
            Upload {{ fileRecords.length }} / {{ maxFiles }} files
        </button>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
// @ts-ignore
import mime from 'mime-types';
import { FileRecord } from 'vue-file-agent';

const {
    VUE_APP_API_HOST,
} = process.env;

export default Vue.extend({
    props: {
        label: {
            type: String,
            default: '',
        },
        items: {
        },
        maxFiles: {
            type: Number,
            default: 1,
        },
        itemUrl: {
            type: String,
            default: 'url',
        },
        itemId: {
            type: String,
            default: 'id',
        },
    },
    data(): {
        count: number;
        fileRecords: FileRecord[];
        } {
        return {
            count: 0,
            fileRecords: [],
        };
    },
    watch: {
        items: {
            handler(val: []) {
                this.fileRecords = val.map((file: any): any => {
                    if (!file) return null;
                    const url = file[this.itemUrl];
                    if (!url) return null;
                    const filePaths = url.split('/');
                    const fileName = filePaths[filePaths.length - 1];
                    const mimeType = mime.lookup(fileName);

                    return {
                        id: file[this.itemId].toString(10),
                        name: fileName,
                        type: mimeType,
                        size: 561813,
                        url: this.getFullPath(url),
                    };
                }).filter((file) => !!file);
            },
        },
    },
    methods: {
        getFullPath(path: string) {
            return `${VUE_APP_API_HOST}/storage/${path}`;
        },
        onDeleteClicked(record: FileRecord) {
            if (parseInt(record.id, 10) < 0) {
                const removingFileIndex = this.fileRecords.findIndex((f) => f.id === record.id);
                this.fileRecords.splice(removingFileIndex, 1);
            } else {
                this.$emit('delete', record.name(), record);
            }
            this.$emit('input', this.fileRecords);
        },
        onUpload(records: FileRecord[]) {
            this.count -= 1;
            records[records.length - 1].id = this.count.toString(10);
            this.fileRecords = records;
            this.$emit('input', this.fileRecords);
            this.$emit('change', this.fileRecords.map((record) => record.file));
        },
    },
});
</script>

<style scoped>
    .pointer {
        cursor: pointer;
    }

    .file-preview {
        width: 200px;
        height: 300px;
        object-fit: cover;
        border-radius: 2px;
        border: 1px solid #b0b0b0;
    }
</style>
